<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <!-- head 中 -->
    <link rel="stylesheet" href="file:///android_asset/weui/weui.min.css">
    <link rel="stylesheet" href="file:///android_asset/weui/jquery-weui.mini.css">
    <!-- body 最后 -->
    <script src="file:///android_asset/weui/jquery.min.js"></script>
    <script src="file:///android_asset/weui/jquery-weui.min.js"></script>

</head>

<body>

    <div id="cellEntry_table" class="weui-cells"></div>
    <div id="my_interface"></div>
    <script>

        //第一步要获得所有数据
        //获取该页面要展示的记录项Json:
        let recordEntryJson = window.androidObject.getAndroidRecordEntry();
        //recordEntryJson="{\"id\":\"idString\",\"name\":\"记录项名称,比如学习情况\",\"template_id\":\"模板idString\",\"analysis_result\":\"分析结果String\",\"format\":\"格式String\"}";
        let recordEntry = JSON.parse(recordEntryJson);
        //获取该页面要展示的具体数据:
        let cellEntryListJson = window.androidObject.getAndroidCellEntryList();
        //cellEntryListJson="[{\"date\":1111100,\"value\":\"睡得很早\"},{\"date\":1111100,\"value\":\"睡得很早\"},{\"date\":1111100,\"value\":\"睡得很早\"},{\"date\":1111100,\"value\":\"睡得很早\"},{\"date\":1111100,\"value\":\"睡得很早\"}]";
        let cellEntryList = JSON.parse(cellEntryListJson);


        //第二部准备好给separate_js准备的函数
        window.getFormat = function (template_id) {
            return recordEntry.format;
        };
        window.getAnalysisResult = function (template_id) {
            return recordEntry.analysis_result;
        };
        let my_interface = document.getElementById("my_interface");
        my_interface.innerHTML = "格式json为:" + window.getFormat() + "\n" + "分析结果为:" + window.getAnalysisResult();


        //第三步加载数据到dom元素中
        let div_android_data = document.getElementById("android_data");
        let div_table = document.getElementById("cellEntry_table");
        for (i in cellEntryList) {
            let cellEntry = cellEntryList[i];

            //放数据的整个格子
            let div_cell = document.createElement("div");


            //放日期的地方
            let div_date = document.createElement("div");
            div_date.setAttribute("class", "weui-cells__title");
            let dateContent = new Date(cellEntry.date).toLocaleString();
            //div_date.setAttribute("choiceKey", keyChoice);
            //添加内容
            div_date.innerHTML = `
            <div class="weui-cell__bd">
                <a href="javascript:;" class="weui-btn weui-btn_mini weui-btn_primary">
                    `+ dateContent + `
                </a>
            </div>`;

            //放数据的地方:
            let div_value = document.createElement("div");
            div_value.classList.add("separateJS" + recordEntry.template_id);
            //div_value.setAttribute("class", "weui-cell" + " separateJS" + recordEntry.template_id);
            div_value.setAttribute("template_id", recordEntry.template_id);
            //div_value.className = "weui-cell ";// + " separateJS" + recordEntry.template_id;
            div_value.setAttribute("value", cellEntry.value);
            // div_date.style.backgroundColor="#8BC34A";
            let valueText = cellEntry.value;
            // div_value.innerHTML = `<div class="weui-cell__bd">
            //     `+ valueText + `
            // </div>`;
            div_value.innerHTML = `<div class="weui-cell__bd">
                `+ div_value.className + `
            </div>`;


            //绑定事件,单击数据div,调用安卓的recordView的dialog进行编辑
            div_value.onclick = function () {
                let this_loop_date = cellEntry.date
                window.androidObject.callAndroidRecordView(this_loop_date);
            };

            div_cell.appendChild(div_date);
            //div_cell.appendChild("<br>");
            div_cell.appendChild(div_value);

            div_table.appendChild(div_cell);
        }

    </script>
</body>

</html>